/*
 * @Author: sean
 * @Date:   2019-12-26 11:04:13
 * @Last Modified by:   sean
 * @Last Modified time: 2019-12-31 15:42:55
 */
import Vue from 'vue';

import * as utils from './index.js';

import popups from '../popups';

import footer from '../popups/extend/footer.vue'

import Element from 'element-ui'

function ipopup(option) {
    let { popup, value } = option;
    //获取窗口标题
    let title = option.title ? option.title : "操作窗口";
    //判断模态框是否存在
    if (popups[popup]) {
        let Dialog = Element['Dialog'];

        let visible = true;

        let instance = utils.getInstance(Vue.extend(Dialog), {
            visible: visible,
            title: title
        });

        instance.$slots.default = instance.$createElement(Vue.extend(popups[popup].default), {
            props: {
                value: value
            },
        });

        instance.$slots.footer = instance.$createElement(Vue.extend(footer), {
            props: {
                value: visible
            }
        });
        let model = document.body.appendChild(instance.$el);
        //监听并移除节点
        instance.$watch('visible', function() {
            instance.visible = false;
            document.body.removeChild(model)
        });
    } else {
        console.log(popup + "模态框不存在")
    }
}

// console.log("popups", popups)

let directives = {
    /**
     * 数据池
     * @type {Array}
     */
    store: {},
    /**
     * 弹出层
     * @type {Object}
     */
    ipopup: {
        bind: function(el, binding, vnode) {

        },
        inserted: function(el, binding, vnode) {
            let keys = binding.expression ? binding.expression : "_";
            directives.store[keys] = binding.value ? binding.value : [];
            utils.addEvent(el, 'click', () => {
                //获取双向绑定数据
                let value = directives.store[keys];
                //获取对应模型
                let popup = utils.getShift(binding.modifiers);
                //获取窗口标题
                let title = el.dataset.title ? el.dataset.title : "操作窗口";
                //VM实例
                let vm = vnode.context;
                //判断模态框是否存在
                if (popups[popup]) {
                    let Dialog = Element['Dialog'];

                    let visible = true;

                    let instance = utils.getInstance(Vue.extend(Dialog), {
                        visible: visible,
                        title: title
                    });

                    instance.$slots.default = instance.$createElement(Vue.extend(popups[popup].default), {
                        props: {
                            value: value
                        },
                    });

                    instance.$slots.footer = instance.$createElement(Vue.extend(footer), {
                        props: {
                            value: visible
                        }
                    });
                    let model = document.body.appendChild(instance.$el);
                    //监听并移除节点
                    instance.$watch('visible', function() {
                        instance.visible = false;
                        document.body.removeChild(model)
                    });
                } else {
                    console.log(popup + "模态框不存在")
                }
            })
            //console.log("查看绑定", [el, binding, vnode, directives.store]);
        },
        update: function(el, binding, vnode) {
            let keys = binding.expression ? binding.expression : "_";
            if (!utils.empty(binding.value)) {
                directives.store[keys] = binding.value
            }
        }
    },
    /**
     * 拿起事件
     * @type {Object}
     */
    ihave: {
        bind: function(el, binding, vnode) {

        },
        inserted: function(el, binding, vnode) {

        },
        update: function(el, binding, vnode) {

        }
    },
    /**
     * 放置事件
     * @type {Object}
     */
    iplace: {
        bind: function(el, binding, vnode) {

        },
        inserted: function(el, binding, vnode) {

        },
        update: function(el, binding, vnode) {

        }
    },
    /**
     * 属性事件
     * @type {Object}
     */
    iattr: {
        bind: function(el, binding, vnode) {

        },
        inserted: function(el, binding, vnode) {

        },
        update: function(el, binding, vnode) {

        }
    }

}


Object.keys(directives).forEach(function(key, index) {
    let item = directives[key];
    Vue.directive(key, item);
})

Vue.prototype.$ipopup = ipopup;
// for (let i in) {
//  Things[i]
// }

// Vue.directive("iwidget", directives["iwidget"]);